<template>
    <div class="my-box">
        <img :src="userInfo.avatarUrl">
        <div>
            {{ userInfo.nickname }}
        </div>
        <van-button type="primary" @click="handleLogOut">退出登录</van-button>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getUserDetail } from "@/utils/api.js"
import { useStore } from "vuex";
export default defineComponent({
    setup() {
        const store = useStore()
        const router=useRouter()
        const state = reactive({
            userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
        })
        console.log(state.userInfo)
        function handleLogOut(){
            store.commit("changeLogin",false)
            router.push("login")
            sessionStorage.removeItem("userInfo")
            sessionStorage.removeItem("token")

        }
        return {
            ...toRefs(state),
            handleLogOut
        };
    },
});
</script>

<style lang="less" scoped>
.my-box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:0.3rem;
    img{
        border-radius: 50%;
    }
}
</style>